<template>
  <main>
    <div
      class="endpoint"
      :style="{ left: startX, top: startY, borderWidth: radius1, borderColor: circleFill1 }"
    ></div>
    <div
      class="endpoint"
      :style="{ left: endX, top: endY, borderWidth: radius2, borderColor: circleFill2 }"
    ></div>
    <svg :width="width" :height="height" class="svg-overflow">
      <polyline
        :points="pointsValue"
        :stroke="lineStroke"
        :stroke-width="lineWidth"
        fill="none"
      ></polyline>
    </svg>
  </main>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { max } from '@/utils/math';
import type { Point } from './types/Point';

const { points, lineWidth } = defineProps({
  points: {
    type: Array<Point>,
    default: []
  },
  radius1: {
    type: String,
    default: '5px'
  },
  radius2: {
    type: String,
    default: '5px'
  },
  circleFill1: {
    type: String,
    default: 'blue'
  },
  circleFill2: {
    type: String,
    default: 'blue'
  },
  lineStroke: {
    type: String,
    default: 'blue'
  },
  lineWidth: {
    type: String,
    default: '2px'
  }
});

function getPointValues(values: Point[]) {
  let path = '';
  values.forEach((item) => {
    path += `${item.x},${item.y},`;
  });
  if (path.length == 0) {
    return path;
  } else {
    return path.substring(0, path.length - 1);
  }
}

const width = ref<number>(max(points, (point) => point.x) ?? 0);
if (width.value == 0) {
  width.value = Number(lineWidth.substring(0, lineWidth.length - 2));
}
const height = ref<number>(max(points, (point) => point.y) ?? 0);
if (height.value == 0) {
  height.value = Number(lineWidth.substring(0, lineWidth.length - 2));
}
const pointsValue = ref(getPointValues(points));

const startX = ref((points.length > 0 ? points[0].x : 0).toString() + 'px');
const startY = ref((points.length > 0 ? points[0].y : 0).toString() + 'px');
const endX = ref((points.length > 0 ? points[points.length - 1].x : 0).toString() + 'px');
const endY = ref((points.length > 0 ? points[points.length - 1].y : 0).toString() + 'px');
</script>

<style lang="scss" scoped>
.endpoint {
  border: solid;
  border-radius: 50%;
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
}

.svg-overflow {
  overflow: visible;
  position: absolute;
  z-index: 0;
}
</style>

